<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>web08</title>
		<meta name="author" content="ch choongang" />
		<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
		<script>
			$(function(){	//페이지 로딩 후에 실행하
				$("#fadein").click(function(){
					//0.6초 동안 화면에 나타난 후 평션 실행
					$("p").fadeIn("slow", function(){
						$("#fadein").css("color","red");
					});
					/* slow 0.6 normal 0.4 fast 0.2 */
				});
				$("#fadeout").click(function(){
					$("p").fadeOut("normal", function(){
						$("#fadein").css("color","blue");
					});
				});
				// 대상을 클릭하면 펑션이 실행되도록 셋팅
				$("#fadetoggle").bind("click", function(){
					// fadeOut <-> fadeIn
					$("p").fadeToggle("slow", function(){});
				});
				// $(selector).fadeTo(speed,opacity,callback);
				//opacity 불투명도 0(투명) ~ 1(불투명)
				$("#ft2").bind("click",function(){
					$("p").fadeTo("slow", 0.2, function(){});
				});
				$("#ft7").bind("click",function(){
					$("p").fadeTo("slow", 0.7, function(){});
				});
				$(".menu1").fadeOut(1);
				$(".menuTitle1").click(function(){
					$(".menu1").fadeToggle(1);
				});
				$(".menu2").fadeOut(1);
				$(".menuTitle2").click(function(){
					$(".menu2").fadeToggle(1);
				});
				// [속성네] 존재하면 선택한다.
				$("[name]").css("color","blue");
				// attributeContainPrefix selector
				// jQuery("[attribute|='value']")
				// code-  (quoted string)
				// 해당 밸류로 시작하는 
				jQuery("[name|='code']").css("color","red");
				// Attribute Contains Selector 포함하면 선
				$("[name*='co']").css("text-decoration","underline");
				//Attribute Contains Word Selector 
				//단독으로 떨어져 있는 단어가 있으면 선택
				$("[name~='j']").css("font-size","1.5em");
				//Attribute Ends With Selector  j로 끝나면 선택
				$("[name$='j']").css("background-color","yellow");
				$("[name='code']").css("background-color","green");
				//Attribute Starts With Selector 
				$("[name^='code']").css("margin-left","2px");
				//Child Selector (“parent > child”)
				$("ol#grand li").css("font-size","1.5em");
				// :eq() Selector
				// li:eq(0) - 가장 앞에 있는 li를 선택해라
				$("li:eq(0)").css("color","red");
				$("li:eq(1)").css("color","blue");
				//li중에서 index < 2 인것을 선택
				$("li:eq(2)").css("text-decoration","underline");
				// lin중에서 index > 2인것을 선택
				$("li:gt(2)").css("text-decoration", "overline");
				// eq(-1) 가장 마지막의 것을 선택
				$("li:eq(-1)").css("color","gold");
				//:has() Selector
				$("ol:has(li)").css("background-color","#dddddd");
				$("ol:has(li)").css(
					"border","1px solid black");
				/* :first-of-type Selector
				*각각의 부모를 갖는 첫번째 tr을 찾아라*/
				$("tr:first-of-type").css("background-color","#ffdddd");
				/*Next Adjacent Selector (“prev + next”)
				 * prev + next 꼭 붙어있어야하고,
				 * 적용대상은 next만 */
				$("[name='code'] + [name='code-2j']")
					.css("font-style","italic");
				//Next Siblings Selector (“prev ~ siblings”)
				//첫번째 테이블의 다음 형제 table을 선택
				$("table:first ~ table").css("border","1px solid black");
				
				// 메뉴 처리를 하자
				$("div + ol").fadeOut(1);
				/*div(메뉴)를 클릭하면
				 * 바로 다음에 있는 ol이 fadeToggle되도록
				 */
				$("div").click(function(){
					console.log("this",this);
					console.log("this.next()", this.next());
					// .next()는 다음 형제를 선택해라.
					$(this).next().fadeToggle();
				});
				//선택자는 두 종류가 있다.  $(),   .메서드() 이렇게...
				// :nth-child() Selector는 자식중에 선택하여 찾는다.
				/// td자식이 1개 뿐이므로...
				$("table:nth-child(even)").css("color","blue");
				$("table:nth-child(even)").css(
					"background-color","brown");
				$("table:nth-child(odd)").css("color","purple");
				// 3, 6, 9, ... 3의 배수
				$("table:nth-child(3n)").css("color","green");
				// nth-child() 는 1부터 시작합니다.
				$("table:nth-child(1)").css("color","yellow");
				
				
			});
		</script>
		<style>
			d{font-style: italic}
		</style>
	</head>
	<body>
		<table>
			<tr><td>이름</td></tr>
			<tr><td>킴</td></tr>
			<tr><td>리</td></tr>
		</table>
		<table>
			<tr><td>사는 곳</td></tr>
			<tr><td>킴</td></tr>
			<tr><td>리</td></tr>
		</table>
		&lt; 여는 태그 &gt; 닫는 태그
		<ol> 자식이 없는 ol</ol>
		<ol id="grand">
			<li> ol의 첫번째 직계 자식</li>
			<li> ol의 두번째 직계 자식</li>
				<ol>
					<li> 부모ol의 첫번째 손자</li>
					<li> 부모ol의 번째 손자</li>
				</ol>
		</ol>
		<div name="code"> 선택자 연습 </div>
		<div name="code-2j"> 선택자 연습 </div>
		<div name="code-j"> code j </div>
		<span id="ft2"> fadeTo opacity=0.2</span>
		<span id="ft7"> fadeTo opacity=0.7</span>
		<h4 id="fadetoggle"> fadeToggle</h4>
		<h4 id="fadein"> fadeIn </h4>
		<h4 id="fadeout"> fadeOut </h4>
		<p> jQuery가 1.9로 업데이트되었습니다.</p>
		<div class="menuTitle1">메뉴1</div>
		<ol class="menu1"><li>배경회색</li><li>배경 하얀색</li>
		</ol>
		<div class="menuTitle2">메뉴2</div>
		<ol class="menu2"><li>배경검은색</li><li>배경 푸른색</li>
		</ol>
	</body>
</html>

